import React, { useEffect, useState } from 'react'
import sendHttp from '../../http/sendHttp'
// import { Toast, NavBar } from 'react-vant';
import { Arrow } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom'
import './Com.scss'

export default function CityList() {

    const [cityList, setCityList] = useState([])
    const [citys, setCitys] = useState('')
    const [hotCitys, setHotCitys] = useState([])
    const navigate = useNavigate()


    useEffect(() => {
        sendHttp("get", 'v1/cities?type=group')
            .then(res => {
                // console.log(res.data);
                setCityList(res.data)
            })
        sendHttp("get", 'v1/cities?type=guess')
            .then(res => {
                // console.log(res.data);
                setCitys(res.data)
            })
        sendHttp("get", 'v1/cities?type=hot')
            .then(res => {
                // console.log(res);
                setHotCitys(res.data)
            })
    }, [])
    return (
        <div>
            <div className="header">
                <div>ele.me</div>
                <div>登录/注册</div>
            </div>
            <div className="dingwei_text">
                <div>当前定位城市</div>
                <p>定位不准时请在城市列表选择</p>
            </div>
            <div className="dq-city">
                <p onClick={() => navigate(`/city?id=${citys.id}`)}>{citys.name}</p>
                <p><Arrow /></p>
            </div>
            <div className="hot-city">
                <div className='hot-title'>热门城市</div>
                <div className='hot-citys'>
                    {hotCitys.map(item => {
                        return (
                            <div key={item.id} className='hot-title' onClick={() => navigate(`/city?id=${item.id}`)}>{item.name}</div>
                        )
                    })}
                </div>
            </div>
            {cityList.length !== 0 &&
                <div>
                    {Object.keys(cityList).map((item, index) => {
                        return (
                            <div className='citys' key={index}>
                                <div className='title'>{item}</div>
                                <div className='citys-main'>
                                    {cityList[item].map((v, idx) => {
                                        return (
                                            <div key={idx} className="citys-item" onClick={() => navigate(`/city?id=${v.id}`)}>
                                                {v.name}
                                            </div>)
                                    })}
                                </div>
                            </div>
                        )
                    })}
                </div>
            }
        </div>
    )
}
